<template>
    <div class="home">
      <div class="main">
        <img src="@\assets\xxxhdpi\编组 5.png" width="460" height="540" />
        <a-typography class="login">
        
          <a-typography-paragraph>
            <a-form
              class="form"
              :model="formState"
              name="basic"
              :label-col="{ span: 0 }"
              :wrapper-col="{ span: 24 }"
              autocomplete="off"
              @finish="applyTest"
            >  
            <a-form-item name="name" :rules="[{
              required: true,
              message: '用户名字数限制2-5位，只包含中文',
              trigger: 'blur',
              min: 2,
              max: 5,
              pattern: /^[\u4e00-\u9fa5]{2,5}$/
            }]">
                <a-input v-model:value="formState.name" placeholder="用户名" class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="phone" :rules="[{ required:true,validator:phoneValidate, message: '手机号码格式错误!' }]">
                <a-input v-model:value="formState.phone" placeholder="手机号" class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]">
                <a-input v-model:value="formState.code" placeholder="验证码" class="default-height" style="width: 228px">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
                  </template>
                </a-input>
                <a-button class="getCode default-height" :disabled="codeState.codeDisabled" :class="{getCodeDisable:codeState.codeDisabled}" @click="getCode" >{{codeState.codeDisabled?'('+codeState.time+')':'获取验证码'}}</a-button>
              </a-form-item>
              <a-form-item name="entName" :rules="[{
                required: true,
                message: '企业名称字数限制3-30位，只包含中文、英文',
                trigger: 'blur',
                min: 3,
                max: 30,
                pattern: /^[\u4e00-\u9fa5a-zA-Z]{3,30}$/
              }]">
                <a-input v-model:value="formState.entName" placeholder="企业名称" class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\ent-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="position" :rules="[{
                required: true,
                message: '职位字数限制2-20位，只包含中文、英文',
                trigger: 'blur',
                min: 2,
                max: 20,
                pattern: /^[\u4e00-\u9fa5a-zA-Z]{2,20}$/
              }]">
                <a-input v-model:value="formState.position" placeholder="职位" class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\position-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="phone" class="form-item-remark">
                <a-textarea v-model:value="formState.description" :maxlength="200"  :auto-size="{ minRows: 2, maxRows: 5 }" placeholder="(选填)请在下方填写您使用本产品的场景和需求" class="default-height">
                  <!-- <template #prefix>
                    <img src="@\assets\xxxhdpi\description-icon.png" width="16" height="16" />
                  </template> -->
                </a-textarea>
                <img class="icon-remark" src="@\assets\xxxhdpi\description-icon.png" width="16" height="16" />
              </a-form-item>
  
              <a-form-item>
                <a-button type="primary" html-type="submit" :disabled="disabled" style="width: 100%; height: 48px"
                  >提交申请</a-button
                >
              </a-form-item>
              <div style="text-align: center;">
                <RouterLink to="/" class="back-login">返回登录</RouterLink>
              </div>
            </a-form>
          </a-typography-paragraph>
        </a-typography>
      </div>
    </div>  
  </template>
  <script lang="ts" setup>
  import { applyTrial } from '@/api/user'
  import { useUserInfoStore } from '@/stores/modules/userInfo'
  import { reactive, ref, h, computed } from 'vue'
  import { useRoute,useRouter } from 'vue-router'
  import { getSmsCode } from '@/api/user'
  import { message } from 'ant-design-vue'
  import { ApplyForm } from '@/api/type'
  
  
  interface CodeState {
    time: number
    codeDisabled: boolean
  }
  const formState = reactive<ApplyForm>({
    phone: '',
    name: '',
    code: '',
    position: '',
    description:'',
    entName: ''
  })

  const route = useRoute()
  const router = useRouter()
  console.log('route', route)
  const codeState = reactive<CodeState>({
    time: 60,
    codeDisabled: false
  })
 const disabled = computed(()=> {
    return  !formState.phone || !formState.name || !formState.code || !formState.position || !formState.entName
  })
  const userStore = useUserInfoStore()
  let phoneValidate = (rule: any, value: string) => {
    if (!value) {
      return Promise.reject('请输入手机号')
    } else if (!/^1[3456789]\d{9}$/.test(value)) {
      return Promise.reject('请输入正确的手机号')
    } else {
      return Promise.resolve()
    }
  }
  const getCode = async() =>{
    if(codeState.codeDisabled){
      return
    }
    try {
      await phoneValidate({},formState.phone)
      const {data} = await getSmsCode(formState.phone)
     if (!data.ok) return
     message.success('验证码发送成功')
      codeState.codeDisabled = true
      let timer = setInterval(() => {
        codeState.time--
        if (codeState.time <= 0) {
          clearInterval(timer)
          codeState.time = 60
          codeState.codeDisabled = false
        }
      }, 1000)
    } catch (error) {
      console.log(error)
      if(typeof error === 'string'){
        message.error(error)
      }
      
    }
  }
  const applyTest = async() =>{
    try {
        await applyTrial(formState)
        
        let successOptions = {
            content: ()=>h('span',{style: {color:'#3875f6',marginLeft:'8px'}},['您的信息提交成功，',h('span',{style: {color:'#292929'}},'若您符合试用条件，将在3个工作日内收到短信提示，请注意查收～')]),
            duration: 3,
            icon: ()=> h('img', { src: new URL('@/assets/xxxhdpi/success-icon.png', import.meta.url), width: 16, height: 16 }),
        }
        message.success(successOptions)
        router.go(-1)
    } catch (error:any) {
        console.log('error', error)
        // let errorOptions = {
        //     content: ()=>h('span',{style: {color:'#292929',marginLeft:'8px'}},['您的信息已经提交或拥有试用权限，',h('span',{style: {color:'#F26666'}},'请勿重复提交～')]),
        //     duration: 3,
        //     icon: ()=> h('img', { src: new URL('@/assets/xxxhdpi/error-icon.png', import.meta.url), width: 16, height: 16 }),
        // }
        let errorOptions = {
            content: ()=>h('span',{style: {color:'#F26666',marginLeft:'8px'}},[error.data.message]),
            duration: 3,
            icon: ()=> h('img', { src: new URL('@/assets/xxxhdpi/error-icon.png', import.meta.url), width: 16, height: 16 }),
        }
        message.error(errorOptions)
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .home {
      display: flex;
      margin: 0 auto;
      justify-items: center;
      position: relative;
      height: 100vh;
      justify-content: center;
      align-items: center;
      .applyTest{
        position: absolute;
        top: 40px;
        right: 40px;
        background: #3A76F6;
      }
    }
    .main {
      display: flex;
      flex-flow: row nowrap;
      border-radius: 16px;
      box-shadow: 0px 20px 40px 10px rgba(184, 198, 223, 0.1);
    }
    .login {
      width: 460px;
      background: white;
      box-sizing: border-box;
      padding: 124px 32px 32px;
      border-radius: 0 16px 16px 0;
      .default-height{
        height: 48px;
      }
      .getCode{
        float: right;
        background: #3C7BFF;
        color: #fff;
        width: 136px;
      }
      .getCodeDisable{
        background: #E5E5E5;
        color: #646464;
      }
    }
    .back-login{
        color: #646464;
    }
    .form-item-remark {
      position: relative;
      .ant-input {
        padding-top: 12px;
        padding-left: 30px;
      }
      .icon-remark {
        position: absolute;
        left: 11px;
        top: 16px;
      }
    }
  
  </style>
  